<template>
  <el-dialog
    title="供应商详情"
    v-model="dialogVisible"
    width="500px"
    append-to-body
    destroy-on-close
  >
    <div class="supplier-detail">
      <div class="detail-item">
        <span class="label">供应商名称：</span>
        <span class="value">{{ supplier.supplierName }}</span>
      </div>
      <div class="detail-item">
        <span class="label">供应商编码：</span>
        <span class="value">{{ supplier.supplierCode }}</span>
      </div>
      <div class="detail-item">
        <span class="label">联系人：</span>
        <span class="value">{{ supplier.contactName || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">联系电话：</span>
        <span class="value">{{ supplier.contactPhone || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">联系地址：</span>
        <span class="value">{{ supplier.address || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">电子邮箱：</span>
        <span class="value">{{ supplier.contactEmail || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">合作状态：</span>
        <span class="value">
          <el-tag :type="supplier.status === '0' ? 'success' : 'danger'">
            {{ supplier.status === "0" ? "合作中" : "已终止" }}
          </el-tag>
        </span>
      </div>
      <div class="detail-item">
        <span class="label">创建时间：</span>
        <span class="value">{{ supplier.createTime || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">更新时间：</span>
        <span class="value">{{ supplier.updateTime || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">备注：</span>
        <span class="value">{{ supplier.remark || "-" }}</span>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, watch, defineComponent } from "vue";

export default defineComponent({
  name: "SupplierDetail",
  props: {
    modelValue: {
      type: Boolean,
      required: true
    },
    supplier: {
      type: Object,
      required: true
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    // 对话框可见性
    const dialogVisible = ref(props.modelValue);

    // 监听visible变化
    watch(
      () => props.modelValue,
      val => {
        dialogVisible.value = val;
      }
    );

    // 监听dialogVisible变化
    watch(
      () => dialogVisible.value,
      val => {
        emit("update:modelValue", val);
      }
    );

    // 关闭对话框
    const handleClose = () => {
      dialogVisible.value = false;
    };

    return {
      dialogVisible,
      handleClose
    };
  }
});
</script>

<style lang="scss" scoped>
.supplier-detail {
  padding: 10px;

  .detail-item {
    display: flex;
    margin-bottom: 15px;

    .label {
      width: 100px;
      font-weight: 600;
      color: #606266;
    }

    .value {
      flex: 1;
      color: #303133;
      word-break: break-all;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
